
<!-- 秒杀列表 -->
<template>
	<view class="page_box">
		<view class="head_box"></view>
		<view class="content_box">
			<swiper :interval="3000" :duration="1000" style="width: 100vw; height: 5905rpx;" :current='current'>
				<swiper-item>
					<view class="swiper-item" style="width: 100vw; height: 5905rpx;">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/6364.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" style="width: 100vw; height: 5905rpx;">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/tuid.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
				
			</swiper>
			
			<view class="fixed flex justify-between align-center">
				<view class=" padding-lr  round flex justify-center" @click="click(0)">
					<text class="cuIcon-back text-black" style="font-size: 50rpx;"></text>
				</view>
				<view class=" padding-lr  round flex justify-center" @click="click(1)">
					<text class="cuIcon-right text-black" style="font-size: 50rpx;"></text>
				</view>
			</view>
		</view>
		
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shActivityCard from '../children/sh-activity-card.vue';
export default {
	components: {
		shActivityCard,
	},
	data() {
		return {
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/empty_goods.png',
				tip: '暂无秒杀商品，敬请期待~',
			},
			isLoading: true,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			currentPage: 1,
			tabCurrent: 'ing',
			goodsList: [],
			loading: false,
			current:0,
			btnType: {
				ended: {
					name: '已结束',
					color: 'btn-end',
				},
				ing: {
					name: '立即抢购',
					color: 'btn-ing',
				},
				nostart: {
					name: '立即抢购',
					color: 'btn-nostart',
				},
			},
			tabList: [
				{
					id: 'ended',
					title: '已结束',
				},
				{
					id: 'ing',
					title: '进行中',
				},
				{
					id: 'nostart',
					title: '即将开始',
				},
			],
		};
	},
	computed: {},
	onLoad() {
		setTimeout(() => {
			this.loading = true;
		}, 500);
		this.getGoodsList();
	},
	methods: {
		click(e){
			console.log('e :>> ', e);
			this.current = e
		},
		onTab(id) {
			this.tabCurrent = id;
			this.goodsList = [];
			this.currentPage = 1;
			this.$u.debounce(this.getGoodsList);
		},
		// 百分比
		getProgress(sales, stock) {
			let unit = '';
			if (stock + sales > 0) {
				let num = (sales / (sales + stock)) * 100;
				unit = num.toFixed(2) + '%';
			} else {
				unit = '0%';
			}
			return unit;
		},
		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getGoodsList();
			}
		},
		// 秒杀列表
		getGoodsList() {
			let that = this;
			that.isLoading = true;
			that.loadStatus = 'loading';
			that.$api('goods.seckillList', {
				type: that.tabCurrent,
				page: that.currentPage,
			}).then(res => {
				if (res.code === 1) {
					that.isLoading = false;
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
	},
};
</script>

<style lang="scss">
.content_box {
	.fixed{
		position: fixed;
		bottom: 50%;
		left: 0;
		// opacity: .8;
		//background: red;
		
		width: 100vw;
		height: 100rpx;
	}
	
	
}
.tab-box {
	.tab-item {
		flex: 1;
		line-height: 84rpx;
		text-align: center;
		background: #636363;
		color: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		position: relative;
		border-right: 1rpx solid #fff;
		.tab-triangle {
			position: absolute;
			z-index: 2;
			bottom: -14rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 28rpx;
			height: 28rpx;
			background: #e6b873;
			transform: rotate(45deg);
			transform-origin: center;
		}
	}

	.tab-active {
		background: #e6b873;
	}
}
.goods-item {
	margin-bottom: 2rpx;
	.cu-progress {
		width: 225rpx;
		height: 16rpx;
		.progress--color {
			background: #e6b873;
		}
	}
	.progress-text {
		color: #999999;
		font-size: 20rpx;
		margin-left: 25rpx;
	}
	.buy-btn {
		position: absolute;
		right: 0;
		bottom: -20rpx;
		width: 140rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;

		padding: 0;
	}
	.btn-end,
	.btn-nostart {
		background: rgba(238, 238, 238, 1);
		color: #999999;
	}
	.btn-ing {
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		color: rgba(255, 255, 255, 1);
	}
}
</style>
